<template>
  <div class="user-management-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-info">
          <h1 class="page-title">
            <SvgIcon name="user" class="title-icon" />
            用户管理
          </h1>
          <p class="page-description">管理系统用户信息，包括用户状态控制和基本信息查看</p>
        </div>
        <div class="header-stats">
          <div class="stat-item">
            <div class="stat-icon active">
              <SvgIcon name="user-check" />
            </div>
            <div class="stat-content">
              <div class="stat-number">256</div>
              <div class="stat-label">活跃用户</div>
            </div>
          </div>
          <div class="stat-item">
            <div class="stat-icon disabled">
              <SvgIcon name="user-x" />
            </div>
            <div class="stat-content">
              <div class="stat-number">12</div>
              <div class="stat-label">禁用用户</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 表格容器 -->
    <div class="table-container">
      <el-card class="table-card">
        <div class="table-header">
          <div class="header-left">
            <h3 class="table-title">用户列表</h3>
            <p class="table-subtitle">查看和管理所有系统用户信息</p>
          </div>
        </div>
        <ProTable
          ref="proTable"
          :dataCallback="dataCallback"
          :columns="columns"
          :requestApi="getUserManagementInfoList"
          :initParam="initParam"
          :stripe="true"
        ></ProTable>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="tsx">
import { reactive, ref } from 'vue'
import { ColumnProps } from '@/components/ProTable/src/types'
import ProTable from '@/components/ProTable/src/ProTable.vue'
import { UserStatus, UserStatusMap } from '@/enums/constEnums'
import {
  getUserManagementInfoList,
  updateUserManagementStatus,
} from '@/api/userManagement'
import { UserManagementInfoInterface } from '@/api/userManagement/types'

// *获取 ProTable 元素，调用其获取刷新数据方法
const proTable = ref<InstanceType<typeof ProTable>>()

// *表格配置项
const columns: ColumnProps[] = [
  {
    prop: 'nickname',
    label: '昵称',
  },
  {
    prop: 'avatarUrl',
    label: '头像',
    render: ({ row }: { row: UserManagementInfoInterface }) => {
      return (
        <el-image
          style={{ width: '60px', height: '60px' }}
          src={row.avatarUrl}
          fit="cover"
        ></el-image>
      )
    },
  },
  {
    prop: 'phone',
    label: '手机',
    search: { el: 'input', props: { placeholder: '请输入手机号' } },
  },
  {
    prop: 'status',
    label: '帐号状态',
    enum: UserStatusMap,
    search: {
      el: 'select',
      props: { placeholder: '请选择帐号状态' },
    },
    render: ({ row }: { row: UserManagementInfoInterface }) => {
      return (
        <el-switch
          active-value={UserStatus.NORMAL}
          inactive-value={UserStatus.DISABLED}
          v-model={row.status}
          onChange={() =>
            updateUserManagementStatus(row.id, row.status as UserStatus)
          }
        ></el-switch>
      )
    },
  },
]

// *查询参数
const initParam = reactive({})

// 处理返回的数据格式
const dataCallback = (data: any) => {
  return {
    list: data?.records,
    total: data?.total,
  }
}
</script>

<style scoped lang="scss">
.user-management-container {
  padding: 1.5rem;
  background: var(--bg-color-page);
  min-height: 100vh;

  .page-header {
    margin-bottom: 2rem;
    padding: 2rem;
    background: linear-gradient(135deg, var(--accent-gradient-start), var(--accent-gradient-end));
    border-radius: 20px;
    color: white;

    .header-content {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .header-info {
        flex: 1;

        .page-title {
          display: flex;
          align-items: center;
          font-size: 2rem;
          font-weight: 700;
          margin-bottom: 0.5rem;
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

          .title-icon {
            width: 2.5rem;
            height: 2.5rem;
            margin-right: 1rem;
          }
        }

        .page-description {
          font-size: 1rem;
          opacity: 0.9;
          margin: 0;
        }
      }

      .header-stats {
        display: flex;
        gap: 2rem;

        .stat-item {
          display: flex;
          align-items: center;
          padding: 1rem 1.5rem;
          background: rgba(255, 255, 255, 0.15);
          border-radius: 16px;
          backdrop-filter: blur(10px);

          .stat-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1rem;

            &.active {
              background: rgba(67, 233, 123, 0.3);
              color: #43e97b;
            }

            &.disabled {
              background: rgba(245, 87, 108, 0.3);
              color: #f5576c;
            }

            svg {
              width: 24px;
              height: 24px;
            }
          }

          .stat-content {
            display: flex;
            flex-direction: column;

            .stat-number {
              font-size: 1.5rem;
              font-weight: 700;
              margin-bottom: 0.25rem;
            }

            .stat-label {
              font-size: 0.8rem;
              opacity: 0.8;
            }
          }
        }
      }
    }
  }

  .table-container {
    .table-card {
      border-radius: 16px;
      border: none;
      overflow: hidden;

      :deep(.el-card__body) {
        padding: 0;
      }

      .table-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.5rem 2rem;
        background: var(--bg-color-light);
        border-bottom: 1px solid var(--border-color-light);

        .header-left {
          .table-title {
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--text-color-primary);
            margin: 0 0 0.25rem 0;
          }

          .table-subtitle {
            font-size: 0.9rem;
            color: var(--text-color-secondary);
          }
        }
      }

      :deep(.pro-table) {
        .el-table {
          border-radius: 0;

          .el-table__header {
            th {
              background: var(--bg-color-light);
              color: var(--text-color-primary);
              font-weight: 600;
              border-bottom: 1px solid var(--border-color-light);
            }
          }

          .el-table__body {
            tr {
              &:hover {
                background: var(--bg-color-light);
              }

              td {
                border-bottom: 1px solid var(--border-color-light);
                color: var(--text-color-primary);
              }
            }
          }
        }

        .table-search {
          padding: 1.5rem 2rem;
          background: var(--bg-color-light);
          border-bottom: 1px solid var(--border-color-light);

          :deep(.el-form-item) {
            margin-bottom: 1rem;

            .el-form-item__label {
              color: var(--text-color-primary);
              font-weight: 500;
            }

            .el-input,
            .el-select {
              .el-input__wrapper {
                border-radius: 8px;
                border: 1px solid var(--border-color-light);
                transition: all 0.3s ease;

                &:hover {
                  border-color: var(--accent-color);
                }

                &.is-focus {
                  border-color: var(--accent-color);
                  box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), 0.1);
                }
              }
            }
          }

          .search-operation {
            .el-button {
              border-radius: 8px;
              font-weight: 500;

              &.el-button--primary {
                background: var(--accent-color);
                border-color: var(--accent-color);
              }
            }
          }
        }

        // 用户头像样式
        .el-image {
          border-radius: 50%;
          border: 2px solid var(--border-color-light);
          transition: all 0.3s ease;

          &:hover {
            border-color: var(--accent-color);
            transform: scale(1.1);
          }
        }

        // 用户状态开关样式
        .el-switch {
          :deep(.el-switch__core) {
            border-radius: 20px;
            transition: all 0.3s ease;

            &.is-checked {
              background-color: var(--success-color);
            }
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .user-management-container {
    padding: 1rem;

    .page-header {
      padding: 1.5rem;

      .header-content {
        flex-direction: column;
        text-align: center;

        .header-info {
          margin-bottom: 1.5rem;

          .page-title {
            justify-content: center;
            font-size: 1.5rem;

            .title-icon {
              width: 2rem;
              height: 2rem;
            }
          }
        }

        .header-stats {
          justify-content: center;
          flex-wrap: wrap;
          gap: 1rem;

          .stat-item {
            padding: 0.75rem 1rem;
          }
        }
      }
    }

    .table-container {
      .table-card {
        .table-header {
          flex-direction: column;
          gap: 1rem;
          text-align: center;
        }
      }
    }
  }
}
</style>
